<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useDeleteRole, useGetRoleList } from '@fl/api/purchase'
import { SearchTable } from '@fl/components'
import { ElButton, ElCard } from 'element-plus'
import { cloneDeep } from 'lodash-es'

import AddOrEdit from './add-or-edit.vue'

const { meta: { isAdmin } } = useRoute()

const { data, isLoading } = useGetRoleList(!!isAdmin)
const { mutate } = useDeleteRole(!!isAdmin)
const id = ref()
const visible = ref(false)
const formType = ref<'add' | 'edit'>('add')

const tableData = ref<any[]>([])
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const gridOptions = reactive<VxeGridProps>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'roleName', title: '角色名称' },
        { field: 'remark', title: '角色描述' },
        { field: 'createTime', title: '创建时间' },
        { field: 'createBy', title: '创建人' },
        { field: 'a10', slots: { default: 'operate' }, title: '操作', width: 250 },
    ],
    data: [
        {
            a1: 'xxx',
        },
    ],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 550,
    keepSource: true,
    showOverflow: true,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

function showAdd() {
    showForm('', 'add')
}

function showEdit(roleId: string) {
    showForm(roleId, 'edit')
}

function showCopy(roleId: string) {
    showForm(roleId, 'add')
}

function showForm(roleId: string, type: 'add' | 'edit') {
    id.value = roleId
    formType.value = type
    visible.value = true
}

function deleteRole(id: string) {
    ElMessageBox.confirm(
        '是否删除角色',
        '提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
        },
    )
        .then(() => {
            mutate(id, {
                onSuccess: () => {
                    ElMessage.success('删除成功')
                },
            })
        })
        .catch(() => {

        })
}
watchEffect(() => {
    if (data.value) {
        tableData.value = cloneDeep(data.value)
        tablePage.total = data.value.total
    }
})
</script>

<template>
    <el-skeleton v-if="isLoading"
                 :rows="5"
    />

    <div v-else>
        <ElCard shadow="never"
                class="mb-20"
        >
            <div class="mb-20 text-16 font-700">
                角色管理
            </div>

            <SearchTable v-bind="gridOptions"
                         row-class-name="table-row-style"
                         :loading="isLoading"
                         :data="tableData"
            >
                <template #toolbar_buttons>
                    <ElButton type="primary"
                              @click="showAdd"
                    >
                        <div class="i-ic:baseline-add size-16" />
                        新建角色
                    </ElButton>
                </template>

                <template #operate="{ row }">
                    <div class="flex gap-20 justify-center">
                        <span v-if="row.displayDeleteButton"
                              class="cursor-pointer"
                              @click="showEdit(row.roleId)"
                        >
                            编辑
                        </span>

                        <span class="cursor-pointer"
                              @click="showCopy(row.roleId)"
                        >
                            复制角色
                        </span>

                        <span v-if="row.displayDeleteButton"
                              class="cursor-pointer"
                              @click="deleteRole(row.roleId)"
                        >
                            删除
                        </span>
                    </div>
                </template>
            </SearchTable>
        </ElCard>

        <AddOrEdit :key="id"
                   v-model:visible="visible"
                   v-model:id="id"
                   :form-type="formType"
        />
    </div>
</template>
